<template>
  <div id="app" class="container">
    <!-- 导航组件 -->
    <navbar></navbar>
    <div class="row">
      <div class="col-md-2">
        <!-- 侧边栏组件 -->
        <my-aside></my-aside>
      </div>
       <div class="col-md-10">
        <!-- 路由组件router-view -->
        <!-- mode可以设置组件显示方式
          out-in : 先出后进(常用)
          in-out : 先进后出

         -->
        <transition name="router-style" mode="out-in">
          <router-view/>
        </transition>
        
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'
import MyAside from './components/MyAside.vue'



export default {
  name: 'App',
  // 注册组件
  components:{Navbar,MyAside} 
  
}
</script>
<style>
    .router-style-enter,.router-style-leave-to{
    
    opacity: 0;
  }
  .router-style-enter-active,.router-style-leave-active{
    transition: all .5s;
  }
</style>

